<script setup>
import {ref, onMounted} from 'vue';
import {query,deleteById} from '@/api/platform/category.jsx';
import {ElMessage, ElMessageBox} from "element-plus";

defineOptions({
  // name 作为一种规范最好必须写上并且和路由的name保持一致
  name: "enterprise"
})
const tableData = ref([])
//企业类目列表
async function initData() {
  let res = await query()
  if (res.code == 200) {
    tableData.value = res.data
  }
}
//删除类目
//删除企业
async function removeCat(id) {
  ElMessageBox.confirm(
    '确删除该类目信息吗，删除后该类目的所有数据将无法恢复!',
    '类目删除确认',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
      let res = await deleteById({id})
      initData()
      if (res.code==200) {
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
      }
    })
    .catch(() => {

    })
}

onMounted(() => {
  initData();
})
</script>

<template>
  <div>
    <h1>企业类目</h1>
    <!-- 数据列表 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="selection" width="55"/>
      <el-table-column prop="code" label="编号" width="120" header-align="center" align="center"/>
      <el-table-column prop="name" label="企业类别" width="260" header-align="center" align="center"/>
      <el-table-column prop="parentId" label="上级类目" width="200" header-align="center" align="center"/>
      <el-table-column prop="enterpriseNum" label="企业数量" width="160" header-align="center" align="center"/>
      <el-table-column prop="createTime" label="添加日期" width="230" header-align="center" align="center"/>
      <el-table-column label="操作" width="252" header-align="center" align="center">
        <template v-slot="{row}">
          <span class="btn">编辑</span>
          <span class="btn" @click="removeCat(row.id)">删除</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style scoped>
.btn {
  color: #3399FF;
  margin-left: 20px;
  cursor: pointer;
  margin-right: 20px;
}
</style>
